<template>
  <el-container>
    <el-header>
      <h2>现场纠违记录</h2>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="当事人员">
          <el-cascader
            :options="clientList"
            :style="{width:'100%'}"
            v-model="form.name"
            placeholder="请在列表中选择或直接输入"
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="席位类型">
          <el-cascader
            v-model="form.seat"
            :style="{width:'100%'}"
            :options="seats"
            placeholder="请在列表中选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="搭档人员">
          <el-cascader
            :options="clientList"
            :show-all-levels="false"
            :clearable="true"
            :props="{multiple:true}"
            :style="{width:'100%'}"
            v-model="form.partners"
            placeholder="请在列表中选择或直接输入"
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="事件情节">
          <el-checkbox-group v-model="form.attributes">
            <el-checkbox v-for="item in rectifyAttributes" :key="item.label" :label="item.label"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="事件时间">
          <el-col :span="11">
            <el-date-picker placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center">
            <i class="el-icon-minus"></i>
          </el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.time" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="违规项目">
          <el-cascader
            :options="itemList"
            v-model="form.item"
            :style="{width:'100%'}"
            placeholder="请在列表中选择或输入关键字进行检索"
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="事件描述">
          <el-input
            type="textarea"
            v-model="form.description"
            :autosize="{ minRows: 3, maxRows: 99 }"
            resize="none"
            placeholder="请对违规事件进行文字描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="提交选项">
          <el-radio-group v-model="form.level">
            <el-radio label="一般">提交为一般记录</el-radio>
            <el-radio label="案例">提交为案例记录</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-top: 60px;">
          <el-button @click="clear">清空内容</el-button>
          <el-button @click="confirm" type="primary">提交记录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <confirmModel
      :outerVisible="showConfirm"
      :formData="formData"
      @cancel="cancel"
      @finish="finish"
    ></confirmModel>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
import confirmModel from "./ConfirmModel";
export default {
  components: {
    confirmModel,
  },
  data() {
    return {
      active: 0,
      form_blank: "",
      form: {
        name: "",
        seat: "",
        partners: [],
        date: new Date(),
        time: new Date(),
        attributes: [],
        item: [],
        description: "",
        level: "一般",
      },
      showConfirm: false,
    };
  },
  computed: {
    ...mapState({
      clientList: (state) => state.clientData.clientCascaderLite,
      clientData: (state) => state.clientData.clientList,
      clientRankList: (state) => state.clientData.clientRankList,
      records: (state) => state.record.inspect.liveRecord,
      seats: (state) => state.statics.position,
      itemList: (state) => state.rectifyData.rectifyCascader,
      fullItems: (state) => state.rectifyData.rectifyItems,
      rectifyAttributes: (state) => state.statics.rectifyAttributes
    }),
    formData() {
      return {
        name: this.form.name[1],
        office: this.form.name[0],
        group: this.currentClientGroup,
        rank: this.currentClientRank,
        seat: this.form.seat,
        partners: this.form.partners,
        date: this.theTime,
        attributes: this.form.attributes,
        item: this.form.item,
        value: this.currentItemValue,
        level: this.form.level,
        description: this.form.description,
      };
    },
    theTime() {
      let d0 =
        this.form.date.toDateString() + " " + this.form.time.toTimeString();
      let d1 = new Date(d0);
      let d2 =
        d1.getFullYear() +
        "-" +
        (d1.getMonth() + 1) +
        "-" +
        d1.getDate() +
        " " +
        d1.getHours() +
        ":" +
        d1.getMinutes() +
        ":" +
        d1.getSeconds();
      return d2;
    },
    currentClientRank() {
      for (let i = 0; i < this.clientData.length; i++) {
        if (
          this.clientData[i].clientOffice == this.form.name[0] &&
          this.clientData[i].name == this.form.name[1]
        ) {
          return this.clientData[i].clientRank;
        }
      }
      return "";
    },
    currentClientGroup() {
      for (let i = 0; i < this.clientData.length; i++) {
        if (
          this.clientData[i].clientOffice == this.form.name[0] &&
          this.clientData[i].name == this.form.name[1]
        ) {
          return this.clientData[i].clientGroup;
        }
      }
      return "";
    },
    currentItemValue() {
      for (let i = 0; i < this.fullItems.length; i++) {
        if (
          this.fullItems[i].category == this.form.item[0] &&
          this.fullItems[i].item == this.form.item[1]
        ) {
          return this.fullItems[i].value;
        }
      }
      return "";
    },
  },
  methods: {
    check() {
      if (!this.formData.name || this.formData.name.length === 0) {
        this.notify("请输入 #当事人姓名#", 1);
        return false;
      }
      if (!this.formData.seat || this.formData.seat.length === 0) {
        this.notify("请选择 #席位类型#", 1);
        return false;
      }
      if (!this.formData.item || this.formData.item.length === 0) {
        this.notify("请选择 #违规项目#", 1);
        return false;
      }
      if (
        !this.formData.description ||
        this.formData.description.length === 0
      ) {
        this.notify("请输入 #文字描述#", 1);
        return false;
      }
      return true;
    },
    submit() {
      this.showConfirm = false;
      this.notify("已提交数据");
    },
    cancel() {
      this.showConfirm = false;
    },
    confirm() {
      console.log("submit");
      this.showConfirm = this.check();
    },
    finish() {
      this.reset();
      this.showConfirm = false;
    },
    reset() {
      this.form = JSON.parse(this.form_blank);
      this.form.date = new Date();
      this.form.time = new Date();
    },
    clear() {
      console.log("clear");
      this.reset();
      this.notify("已清空全部内容", 3);
    },
    notify(msg, err = 0) {
      if (err === 0) {
        this.$notify.success({
          title: "完成",
          message: msg,
        });
      } else if (err === 1) {
        this.$notify.error({
          title: "错误",
          message: msg,
        });
      } else if (err === 2) {
        this.$notify.warning({
          title: "注意",
          message: msg,
        });
      } else {
        this.$notify.info({
          title: "提示",
          message: msg,
        });
      }
    },
  },
  mounted() {
    this.form_blank = JSON.stringify(this.form);
  },
};
</script>

<style scoped>
</style>